<template>
	<!-- 试听记录 -->
	<div>
		<div class="condition" style="padding:0.2rem 0;">
			<el-select class="select" v-model="searchParam.signinMode" 
				placeholder="全部考勤状态" clearable>
				<el-option label="未签到" value="0"></el-option>
				<el-option label="签到" value="1"></el-option>
				<el-option label="旷课" value="5"></el-option>
			</el-select>
			
			<el-select class="select" v-model="searchParam.classId"
				placeholder="全部试听班级" clearable filterable >
				<el-option v-for="item in classList" :key="item.classId"
						:label="item.className" :value="item.classId">
				</el-option>
			</el-select>
			
			<el-select class="select" v-model="searchParam.clueState" 
				placeholder="全部试听人员" clearable>
				<el-option v-for="item in clueStatusList" :key="item.value"
						:label="item.name" :value="item.value">
				</el-option>
			</el-select>
			
			<el-input v-model="searchParam.keyword" placeholder="搜索 试听用户名/手机号" 
				style="width: 3.15rem;" clearable maxlength="100">
			</el-input>
			&emsp;
			
			<div class="search_btn" @click="search(1)" v-if="hasApi('auditionQueryRecord')">搜索</div>
		</div>
		<div class="box-table" style="margin-top:0.1rem;">
			<table class="table" cellspacing="0">
				<thead class="thead">
					<tr>
						<td style="width: 0.5rem;"></td>
						<td style="width: 1.5rem;">孩子姓名</td>
						<td style="width: 1.2rem;">手机号</td>
						<td style="width: 1.2rem;">微信号</td>
						<td style="width: 3rem;">试听班级</td>
						<td style="width: 3rem;">试听课程</td>
						<td style="width: 3rem;">试听时间</td>
						<td style="width: 1.5rem;">跟进人</td>
						<td style="width: 1rem;">考勤</td>
						<td style="width: 1rem;">操作</td>
					</tr>
				</thead>
				<tbody class="tbody" v-if="reacordList&&reacordList.length>0">
					<tr v-for="(item,index) in reacordList" :key="index">
						<td>
							<div v-if="item.clueState==6" class="clueTypeSymbol">学员</div>
							<div v-else class="clueTypeSymbol">线索</div>
						</td>
						<td>{{item.realName}}</td>
						<td>{{item.phone}}</td>
						<td>{{item.webcat}}</td>
						<td>{{item.className}}</td>
						<td>{{item.courseName}}</td>
						<td>{{item.trailTime}}</td>
						<td>{{item.executeUserName}}</td>
						<td>{{signinModeMap[item.signinMode]||'未签到'}}</td>
						<td>
							<el-button type="text" v-if="item.clueState!=1 && item.clueState!=7 && hasApi('visitAdd')"
							 style="font-size:0.16rem;" @click="openVisitAdd(item)">回访</el-button>
						</td>
					</tr>
				</tbody>
				<tbody class="tbody" v-else>
					<tr>
						<td colspan="10" align="center">暂无数据</td>
					</tr>
				</tbody>
			</table>
		</div>
		<el-pagination
			style="margin-top:0.1rem;"
			layout="total, sizes, prev, pager, next, jumper"
			:current-page="searchParam.currPage"
			:total="pagination.total"
			@size-change="pageSizeChange"
			@current-change="pageIndexChange">
		</el-pagination>
		<visitAdd ref="visitAdd" @callback="closeVisitAdd"></visitAdd>
	</div>
</template>

<script>
var vm;
import visitAdd from './visit_add'
export default {
	components:{
		visitAdd
	},
	data : function() {
		return {
			searchParam:{
				campusId:'',
				classId:'',
				clueState:'',//学员类型-数据字典
				signinMode:'',//签到状态
				keyword:'',//关键字
				currPage:1,
				pageSize:10
			},
			pagination:{
				total:0,
			},
			//表格数据
			reacordList:[],
			//班级列表
			classList:[],
			//用户类型列表
			clueStatusList:[],

			signinModeMap:null,
		}
	},
	computed : {},
	methods : {
		init : function() {
			this.searchParam.campusId=this.$store.state.campusId;
			this.apiQueryRecord();
			this.getClassList();
		},
		/**查询试听记录 */
		apiQueryRecord(){
			api.auditionQueryRecord(this.searchParam).then(function(data){
				if(data.resultCode==2000){
					vm.pagination.total=data.totalCount;
					vm.reacordList=data.list;
					vm.reacordList.forEach(element => {
						let t='';
						if(element.startTime&&element.endTime){
							let start=element.startTime.split(' ');
							let end=element.endTime.split(' ');
							t=start[0]+' '+start[1]+'-'+end[1];
						}
						else if(element.startTime){
							t=element.startTime;
						}
						else if(element.endTime){
							t=element.endTime;
						}
						element.trailTime=t;
					});
				}
			});
		},
		/**重置查询参数 */
		resetParam(){
			this.searchParam={
				classId:'',
				clueState:'',//学员类型-数据字典
				signinMode:'',//签到状态
				keyword:'',//关键字
				currPage:1,
				pageSize:10
			};
			this.pagination.total=0;
		},
		/**获取班级列表 */
		getClassList(){
			api.auditionList({campusId:this.$store.state.campusId}).then(function(data){
				if(data.resultCode==2000){
					vm.classList=data.list;
				}
			});
		},
		pageSizeChange : function(val) { //页条数发生改变
	  		vm.searchParam.pageSize = val;
	    	vm.search(1);
	  	},
	  	pageIndexChange : function(val) { //页码发生改变
	    	vm.searchParam.currPage = val;
	    	vm.search();
		},
		search : function(index) {
			if(index) vm.searchParam.currPage = index;
			this.apiQueryRecord();
		},
		openVisitAdd : function(clue) {
			// let param={
			// 	clueId:clue.clueId,
			// 	clueStatus:clue.clueState,
			// 	realName:'',
			// 	gender:'',
			// 	parentData:[{
			// 		parentName:'',
			// 		phone:''
			// 	}],
			// 	isMatter:''
			// };

			clue.clueStatus=clue.clueState;
			clue.parentData=[{
				parentName:clue.parentName,
				phone:clue.phone
			}];

			vm.$refs.visitAdd.init(clue);
		},
		closeVisitAdd : function(clue) {
			vm.search();
		},
	},
	created : function() {
		vm = this;
		this.signinModeMap=tool.getDictNameByValue(-100,'signin_mode',false);
		this.clueStatusList=tool.getDictNameByValue(-100,'clue_status');
	}
}

</script>
<style scoped src="@/style/module/table.css"></style>
<style scoped>
	.clueTypeSymbol {
		display: block;
		height: 0.26rem;
		background-color: #daf1ff;
    	color: #1f76f7;
		line-height: 0.26rem;
		font-size: 0.16rem;
		border-radius: 0.04rem;
		width: 0.36rem;
		text-align: center;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		font-weight: bold;
		font-stretch: normal;
		letter-spacing: 0;
	}
</style>